<template>
    <div>
        <Header/>
        <el-container class="container" style="display: flex;justify-content: center;    height: 80vh;">
            <el-main class="main">
                <div class="main-container">
                    <el-form
                        ref="ruleFormRef"
                        style="max-width: 600px;margin: 20px auto"
                        :model="ruleForm"
                        :rules="rules"
                        label-width="auto"
                        class="demo-ruleForm"
                        :size="formSize"
                        status-icon
                    >
                        <el-form-item label="举报账号" prop="name">
                            <el-input v-model="ruleForm.name"/>
                        </el-form-item>
                        <el-form-item label="关键词" prop="comkeywords_id" >
                            <el-radio-group v-model="ruleForm.comkeywords_id"  @change="getTwocates()" style="display: inline-flex;flex-direction: column;    align-items: flex-start;">
                                <template v-for="(cate,index) in state.onecatearr" :key="index">
                                    <el-radio :value="cate.id" >{{cate.name}}</el-radio>
                                </template>
                                <el-radio value="0" >自定义</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="自定义关键词" prop="keywords" v-if="ruleForm.comkeywords_id=='0'">
                            <el-input v-model="ruleForm.keywords"/>
                        </el-form-item>
                        <el-form-item label="时间" prop="radio" >
                            <el-select
                                v-model="ruleForm.radio"
                                placeholder="选择时间"
                            >
                                <el-option
                                    v-for="item in state.towcatearr"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="描述" prop="desc" v-if="false">
                            <el-input v-model="ruleForm.desc" type="textarea"/>
                        </el-form-item>
                        <el-form-item label="" style="margin-left: 120px">
                            <el-button type="primary" @click="submitForm(ruleFormRef)">
                                提交
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <div style="max-width: 600px;margin: 0 auto;margin-top: 100px">
                        <el-carousel
                            height="50px"
                            direction="vertical"
                            motion-blur
                            :interval="1500"
                            :autoplay="true"
                        >
                            <el-carousel-item v-for="item in 4" :key="item">
                                <h3 class="small justify-center" text="2xl">张三提交了数据 {{ item }}</h3>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
            </el-main>
        </el-container>

    </div>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {ComponentSize, FormInstance, FormRules} from 'element-plus'
import Header from "/@/layouts/frontend/components/header.vue";
import Footer from "/@/layouts/frontend/components/footer.vue";

import {commentSave, towcate} from '/@/api/frontend/index'

interface RuleForm {
    name: string
    type:string
    keywords: string,
    comkeywords_id: string,
    resource: string
    desc: string
    radio: string
}

import {ElMessage, ElMessageBox} from 'element-plus'
import type {Action} from 'element-plus'

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    type:'opt0',
    keywords: '',
    comkeywords_id: '',
    resource: '',
    desc: '',
    radio: '',
})
const state=reactive({
    onecatearr:[],
    towcatearr:[]
})
const rules = reactive<FormRules<RuleForm>>({
    name: [
        {required: true, message: '请输入举报账号', trigger: 'blur'},
    ],
    comkeywords_id: [
        {required: true, message: '请选择', trigger: 'change'},
    ],
    type: [
        {
            required: true,
            message: '请选择类型',
            trigger: 'change',
        },
    ],
    radio:[{
        required: true,
        message: '请选择',
        trigger: 'change',
    },],
    keywords:[{
        required: true,
        message: '请选择',
        trigger: 'change',
    },],
    desc: [
        {required: true, message: '请输入', trigger: 'blur'},
    ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            subReports()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const subReports = () => {
    commentSave(ruleForm, 'post').then(res => {
        if (res.code == 1) {
            ElMessageBox.alert(res.msg, '提示', {
                // if you want to disable its autofocus
                // autofocus: false,
                confirmButtonText: '确定',
                callback: (action: Action) => {
                    window.location.reload()
                    // ElMessage({
                    //     type: 'info',
                    //     message: `action: ${action}`,
                    // })
                },
            })
        }
    })
}
const tabChange=(e,op)=>{
    state.onecatearr=[];
    getOnecate()
}
const getOnecate=()=>{
    commentSave({},'get').then(res=>{
        state.onecatearr=res.data.keyws;
        state.towcatearr=res.data.radioarr;
    });
}
const getTwocates=()=>{

}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
getOnecate()
const options = Array.from({length: 10000}).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))
</script>
<style scoped>
:deep(.el-tabs__content){
    display: none;
}
.el-carousel--horizontal, .el-carousel--vertical {
    text-align: center;
}

.demonstration {
    color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
    color: #026ff9;
    opacity: 0.75;
    margin: 0;
    text-align: center;
}
</style>
